<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能小车控制面板</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="remote_rod">

    <div class="vertical rod">
      <img id="stick1" src="./img/joystick-speed.png" />
    </div>

    <div class="level rod">
      <img id="stick2" src="./img/joystick-blue.png" />
      <div class="action">
        <img class="icon-zidongdadeng" src="./img/headlight.png" alt="">
        <img class="icon-jinggao_o" src="./img/warning.png" alt="">
        <img class="icon-xiaolaba" src="./img/horn.png" alt="">
      </div>
    </div>

  </div>

  <div class="top_action">
    <div></div>
    <div class="speed">
      <img src="./img/stop.png" alt=""> 0km/h
    </div>
    <div class="right_action">
      <div class="back hand_wrap">
        <img class="icon-hand" src="./img/hand.png" alt="">
      </div>
      <div class="back obstacle_wrap">
        <img class="obstacle" src="./img/obstacle.png" alt="">
      </div>
    </div>
  </div>

  <!-- <div class="lamp">
    <img class="open" src="./img/leftlight.png" alt="">
    <img src="./img/rightlight.png" alt="">
  </div> -->

  <audio class="actionAudio" src="./img/action.mp3" controls hidden></audio>
</body>
<script src="./js/utils.js"></script>
<script src="./js/WebSocket.js"></script>
<script src="./js/Joystick.js"></script>
<script src="./js/index.js"></script>

</html>